<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="nav">
        <li>米粉</li>
        <li>小米</li>
        <li>饺子</li>
        <li>米饭</li>
    </ul>
    <script>
        // 1.点击li打印当前索引号
        // var nav = document.querySelector('.nav')
        // var lis = nav.querySelectorAll('li')
        // 传统做法
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].index = i
        //     lis[i].onclick = function () {
        //         console.log(this.index);
        //     }
        // }
        // 闭包做法
        // for (var i = 0; i < lis.length; i++) {
        //     // 变量所在的函数就是闭包函数 立即执行函数也称小闭包

        //     (function (i) {
        //         lis[i].onclick = function () {
        //             console.log(i);
        //         }
        //     })(i)
        // }


        // 2.三秒之后 打印所有li元素内容
        // for (var i = 0; i < lis.length; i++) {
        //     // setTimeout(function () {
        //     // // 循环属于同步任务 执行完后i = 4 
        //     // // 定时器内的回调函数属异步任务 在同步任务后执行 此时 lis[4]没有第四个 所以是无效代码
        //     //     console.log(lis[i].innerHTML);

        //     // }, 3000)
        //   (function(i){
        //        setTimeout(function(){
        //         // 一个作用域访问了另一个函数内部的局部变量 闭包现象
        //          console.log(lis[i].innerHTML);
        //        },3000)
        //   })(i);
        // }


        // 3.计算打车价格
        // 打车起步价13（3公里内）之后每多一公里加5块 用户输入公里数就可以计算打车价格
        // 如果有拥堵情况 总价格多收取10块钱拥堵费
        var car = (function () {
            var star = 13
            var toggle = 0

            return {
                // piric和yd两个局部作用域使用了另外一个局部作用域的变量(立即执行函数里的star 、toggle) 产生了闭包现象
                piric: function (a) {
                    if (a <= 3) {
                        toggle = star
                    } else {
                        toggle = star + (a - 3) * 5 
                    }
                    return toggle
                },
                yd: function (flag) {
                    return flag ? toggle + 10 : toggle
                }
            }

        })()
        console.log(car.piric(5))//23
        console.log(car.yd(true));//33
        console.log(car.piric(1))//13
        console.log(car.yd(false));//13

//  总结 通常闭包现象都用于在立即执行函数里 立即执行函数也称小闭包
    </script>
</body>

</html>